<template>
    <el-row style="min-height: 460px">
        <el-col :span="8" class="sea-card">
            <div class="box margin-right" style="min-height: 500px;">
                <div class="box-body">
                    <div style="text-align: center;" class="bg-primary margin-bottom padding-large">
                        <div class="role-icon box-circle">
                            <i class="fa fa-user-secret text-fatal" style="margin-left: 6px"></i>
                        </div>
                        <h5>管理员</h5>
                    </div>
                    <div>
          <span>
            管理员 （Administrator）拥有完整的系统权限，角色的权限自上而下派发，管理员是最顶级的账号。
          </span>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="16" class="sea-card">
            <div class="box">
                <div class="box-body role-tabs">
                    <el-tabs style="min-height: 480px; max-height: 56vh" class="role-tabs">
                        <!--基础信息-->
                        <el-tab-pane label="基础信息">
                            <sea-form :model="props.object" :rules="form_rules"
                                      :succeed="props.succeed" :submit="role.modify">
                                <el-form-item label="授权码" prop="authorityCode">
                                    <el-input v-model="props.object.authorityCode" placeholder="授权码"></el-input>
                                </el-form-item>
                                <el-form-item label="角色名称" prop="roleName">
                                    <el-input v-model="props.object.roleName" placeholder="角色名称"></el-input>
                                </el-form-item>
                                <el-form-item label="角色图标" prop="roleIcon">
                                    <el-input v-model="props.object.roleIcon" placeholder="角色图标"></el-input>
                                </el-form-item>
                                <el-form-item label="是否可用" prop="disabled">
                                    <el-switch v-model="props.object.disabled" placeholder="是否可用"></el-switch>
                                </el-form-item>
                                <el-form-item label="是否可编辑" prop="editable">
                                    <el-switch v-model="props.object.editable" placeholder="是否可编辑"></el-switch>
                                </el-form-item>
                                <el-form-item label="描述" prop="description">
                                    <el-input v-model="props.object.description" placeholder="描述"
                                              type="textarea"></el-input>
                                </el-form-item>
                            </sea-form>
                        </el-tab-pane>

                        <!--菜单权限-->
                        <el-tab-pane label="菜单权限">
                            <grant-menu :form_data="form_data"></grant-menu>
                        </el-tab-pane>

                        <!--操作权限-->
                        <el-tab-pane label="操作权限">
                            <grant-permit :form_data="form_data"></grant-permit>
                        </el-tab-pane>
                    </el-tabs>
                    <!--tab end-->
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import GrantMenu from "./grant/menu.vue";
import GrantPermit from "./grant/permit.vue";
import role from "./role.ts";
import {reactive} from "vue";

/**
 * 新增 / 修改通用面板
 *
 * 一般来说，新增和修改的逻辑，是分界面做的，合并容易导致后期代码混乱。
 */
interface Props {
    // 需要操作的数据对象
    object?: Record<string, any>;
    // 是否激活：退出编辑的时候，需要置空内容，或者提交表单内容
    active?: boolean | undefined;
    // 成功回调，通常是刷新数据表格
    succeed?: () => void
    // 本次操作类型
    operation?: 'create' | 'modify';
}

const props = withDefaults(defineProps<Props>(), {
    operation: 'create', active: false
});

const form_rules = reactive(role.formRules);

</script>

<style scoped lang="scss">
.role-icon {
    width: 156px;
    height: 156px;
    font-size: 108px;
    text-align: center;
    background-color: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #777;
    color: rgba(0, 0, 0, 0.15);
}
</style>